
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = [{"name": "SNH48", "itemStyle": {"color": "#8ed2f5"}, "children": [{"name": "Team SII", "itemStyle": {"color": "#91cdeb"}, "children": [{"name": "\u5f90\u5b50\u8f69", "value": 274970.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u5218\u589e\u8273", "value": 303280.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u94b1\u84d3\u5a77", "value": 507247.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u5b59\u82ae", "value": 571978.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u6234\u840c", "value": 710591.5, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u8bb8\u4f73\u742a", "value": 839586.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u5b54\u8096\u541f", "value": 856471.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u5434\u54f2\u6657", "value": 898753.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u5f20\u8bed\u683c", "value": 965200.0, "itemStyle": {"color": "#91cdeb"}}, {"name": "\u83ab\u5bd2", "value": 1222641.0, "itemStyle": {"color": "#91cdeb"}}]}, {"name": "Team NII", "itemStyle": {"color": "#ae86bb"}, "children": [{"name": "\u5f20\u96e8\u946b", "value": 294574.5, "itemStyle": {"color": "#ae86bb"}}, {"name": "\u5468\u8bd7\u96e8", "value": 354540.5, "itemStyle": {"color": "#ae86bb"}}]}, {"name": "Team HII", "itemStyle": {"color": "#f39800"}, "children": [{"name": "\u5b8b\u96e8\u73ca", "value": 236681.5, "itemStyle": {"color": "#f39800"}}, {"name": "\u59dc\u6749", "value": 299090.5, "itemStyle": {"color": "#f39800"}}, {"name": "\u8bb8\u6768\u7389\u7422", "value": 410547.5, "itemStyle": {"color": "#f39800"}}, {"name": "\u8881\u4e00\u7426", "value": 425376.5, "itemStyle": {"color": "#f39800"}}, {"name": "\u5f20\u6615", "value": 435220.5, "itemStyle": {"color": "#f39800"}}, {"name": "\u6c88\u68a6\u7476", "value": 521075.0, "itemStyle": {"color": "#f39800"}}, {"name": "\u8d39\u6c81\u6e90", "value": 526808.0, "itemStyle": {"color": "#f39800"}}, {"name": "\u674e\u827a\u5f64", "value": 1483041.5, "itemStyle": {"color": "#f39800"}}]}, {"name": "Team X", "itemStyle": {"color": "#a9cc29"}, "children": [{"name": "\u674e\u661f\u7fbd", "value": 237810.5, "itemStyle": {"color": "#a9cc29"}}, {"name": "\u6c6a\u4f73\u7fce", "value": 247931.0, "itemStyle": {"color": "#a9cc29"}}, {"name": "\u6768\u51b0\u6021", "value": 291188.5, "itemStyle": {"color": "#a9cc29"}}, {"name": "\u738b\u6653\u4f73", "value": 326029.5, "itemStyle": {"color": "#a9cc29"}}, {"name": "\u51af\u6653\u83f2", "value": 389886.0, "itemStyle": {"color": "#a9cc29"}}, {"name": "\u5b8b\u6615\u5189", "value": 748662.0, "itemStyle": {"color": "#a9cc29"}}]}]}, {"name": "BEJ48", "itemStyle": {"color": "#ff2472"}, "children": [{"name": "Team B", "itemStyle": {"color": "#ff2471"}, "children": [{"name": "\u9752\u94b0\u96ef", "value": 203389.0, "itemStyle": {"color": "#ff2471"}}, {"name": "\u6c88\u5c0f\u7231", "value": 256268.0, "itemStyle": {"color": "#ff2471"}}, {"name": "\u80e1\u6653\u6167", "value": 338298.5, "itemStyle": {"color": "#ff2471"}}, {"name": "\u5218\u59dd\u8d24", "value": 360189.5, "itemStyle": {"color": "#ff2471"}}, {"name": "\u6bb5\u827a\u7487", "value": 1157528.0, "itemStyle": {"color": "#ff2471"}}]}, {"name": "Team E", "itemStyle": {"color": "#0cc8c3"}, "children": [{"name": "\u9648\u5029\u6960", "value": 171231.0, "itemStyle": {"color": "#0cc8c3"}}, {"name": "\u5218\u80dc\u7537", "value": 275202.0, "itemStyle": {"color": "#0cc8c3"}}, {"name": "\u82cf\u6749\u6749", "value": 536758.0, "itemStyle": {"color": "#0cc8c3"}}]}, {"name": "Team J", "itemStyle": {"color": "#006ab7"}, "children": [{"name": "\u9ec4\u6069\u8339", "value": 245999.0, "itemStyle": {"color": "#006ab7"}}, {"name": "\u5f20\u6000\u747e", "value": 387488.0, "itemStyle": {"color": "#006ab7"}}]}]}, {"name": "GNZ48", "itemStyle": {"color": "#9fbf40"}, "children": [{"name": "Team G", "itemStyle": {"color": "#aac913"}, "children": [{"name": "\u6731\u6021\u6b23", "value": 184111.5, "itemStyle": {"color": "#aac913"}}, {"name": "\u5f20\u743c\u4e88", "value": 264607.0, "itemStyle": {"color": "#aac913"}}, {"name": "\u66fe\u827e\u4f73", "value": 267467.5, "itemStyle": {"color": "#aac913"}}, {"name": "\u8c22\u857e\u857e", "value": 394606.5, "itemStyle": {"color": "#aac913"}}, {"name": "\u9648\u73c2", "value": 660218.0, "itemStyle": {"color": "#aac913"}}]}, {"name": "Team NIII", "itemStyle": {"color": "#ffd700"}, "children": [{"name": "\u5362\u9759", "value": 175805.0, "itemStyle": {"color": "#ffd700"}}, {"name": "\u90d1\u4e39\u59ae", "value": 444400.5, "itemStyle": {"color": "#ffd700"}}, {"name": "\u5de6\u5a67\u5a9b", "value": 477344.5, "itemStyle": {"color": "#ffd700"}}, {"name": "\u5218\u529b\u83f2", "value": 579893.0, "itemStyle": {"color": "#ffd700"}}, {"name": "\u5510\u8389\u4f73", "value": 637152.0, "itemStyle": {"color": "#ffd700"}}]}, {"name": "Team Z", "itemStyle": {"color": "#ea627c"}, "children": [{"name": "\u6768\u5a9b\u5a9b", "value": 180939.5, "itemStyle": {"color": "#ea627c"}}, {"name": "\u65b9\u742a", "value": 289940.0, "itemStyle": {"color": "#ea627c"}}]}]}, {"name": "IDFT", "itemStyle": {"color": "#b4006e"}, "children": [{"name": "Team IDFT", "itemStyle": {"color": "#b4006e"}, "children": []}]}]

option = {
    tooltip: {
        show: true,
        formatter: function(params, ticket, callback) {
            console.log(params)
            let rootLength = params.treePathInfo.length
            let parentValue = 0
            let percentValue = 0.0
            let parentName = ''
            let text = ''
            if (rootLength >= 2) {
                parentValue = params.treePathInfo[rootLength-2].value
                parentName = params.treePathInfo[rootLength-2].name
            } else {
                parentValue = params.treePathInfo[0].value
                parentName = params.treePathInfo[0].name
            }
            percentValue = (params.value / parentValue *100).toFixed(1)
            
            if (params.dataIndex) {
                text = params.data.name + ': ' +  params.data.value + '<br>' + '占比'+ parentName + ': ' + percentValue + '%'
            } else {
                text = '返回上一级'
            }
            return text
        }
    },
    series: {
        type: 'sunburst',
        highlightPolicy: 'ancestor',
        data: data,
        radius: [0, '95%'],
        sort: null,
        levels: [{}, {
            r0: '10%',
            r: '35%',
            itemStyle: {
                borderWidth: 2
            },
            label: {
                rotate: 'tangential'
            }
        }, {
            r0: '35%',
            r: '70%',
            label: {
                align: 'right'
            }
        }, {
            r0: '70%',
            r: '80%',
            label: {
                position: 'outside',
                padding: 5,
                silent: true
            },
            itemStyle: {
                borderWidth: 2
            }
        }]
    }
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>
